<template>
  <div
    class="_page-container _battle-detail-wrapper"
    :class="{ ...personNumClassName, _mobile: isMobile }"
  >
    <div class="_battle-detail-container">
      <div v-if="!isMobile" class="_back _click" @click="onViewAllBattles">
        <img :src="Back" />
        <span class="_text-middle">All Battles</span>
      </div>

      <template v-if="loading">
        <div class="_loading">
          <loading-comp class="!w-5rem" :track-width="12" />
        </div>
      </template>
      <template v-else>
        <battle-header :battle="battleDetailInfo" :is-mobile="isMobile" />
        <div class="_center _center-comp" :style="centerCompStyle">
          <component
            ref="battleScrollRef"
            :is="batteContentComp"
            :is-mobile="isMobile"
          />
        </div>
        <div class="_center">
          <div class="_user-list">
            <user-item
              class="_user-item"
              v-for="(user, idx) in battleDetailInfo.user_list || []"
              :key="user.user_id"
              :user="user"
              :position="idx + 1"
              :is-owner="battleDetailInfo.is_owner === 1"
              :is-mobile="isMobile"
              :seconds="battleDetailInfo.remain_seconds"
              :class="{ ...personNumClassName }"
            />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { nextTick } from "vue";

import { battleDetail } from "@/api/battles";
import Back from "@/assets/back.png";
import LoadingComp from "@/components/Loading/loading.vue";
import { BattleDetailStatus } from "@/enum/battle";
import { useMedia } from "@/hooks/useMedia";

import BattleHeader from "./BattleHeader/battleHeader.vue";
import BattleResult from "./BattleResult/battleResult.vue";
import type { BattleScrollInstance } from "./BattleScroll/battleScroll";
import BattleScroll from "./BattleScroll/battleScroll.vue";
import BattleWait from "./BattleWait/battleWait.vue";
import UserItem from "./UserItem/userItem.vue";

const route = useRoute();
const router = useRouter();
const isMobile = useMedia();

const battleScrollRef = ref<BattleScrollInstance>();
const battleDetailInfo = ref<API.Battles.BattleDetailResponse>({});
const isStop = ref(false);
const isPlayWinAudio = ref(false);
const loading = ref(false);

const centerCompStyle = computed(() => { 
  if (!isMobile.value) {
    return {}
  }
  return {
    height: `calc(${window.innerHeight}px - 12.4rem - var(--realbox-header-height))`
  }
})

const personNumClassName = computed(() => {
  return {
    "_two-person": battleDetailInfo.value?.user_list?.length === 2,
    "_three-person": battleDetailInfo.value?.user_list?.length === 3,
    "_four-person": battleDetailInfo.value?.user_list?.length === 4,
  };
});

const batteContentComp = computed(() => {
  const status = battleDetailInfo.value.status;
  if (status === BattleDetailStatus.BattleComplete) {
    return (
      <BattleResult
        class="_battle-result"
        battle={battleDetailInfo.value}
        isPlayWinAudio={isPlayWinAudio.value}
      />
    );
  }
  if (status === BattleDetailStatus.BattleWait) {
    return (
      <BattleWait
        class="_battle-wait"
        boxList={battleDetailInfo.value?.box_list || []}
      />
    );
  }
  if (
    [BattleDetailStatus.BattleLoading, BattleDetailStatus.Battleing].includes(
      BattleDetailStatus.Battleing
    )
  ) {
    const className = {
      ...personNumClassName.value,
      "_battle-scroll": true,
    };
    return <BattleScroll class={className} onEnd={getBattleDetail} />;
  }
  return null;
});

async function getBattleDetail() {
  const result = await battleDetail({
    battle_id: Number(route.params.battle_id),
    next_id: battleDetailInfo?.value.next_id || void 0,
  });

  if (result !== null) {
    battleDetailInfo.value = result || {};
    loading.value = false;
    if (
      [
        BattleDetailStatus.BattleWait,
        BattleDetailStatus.BattleLoading,
      ].includes(result?.status)
    ) {
      await new Promise((resolve) => setTimeout(resolve, 500));
      isStop.value === false && getBattleDetail();
    }

    if (
      [BattleDetailStatus.BattleLoading, BattleDetailStatus.Battleing].includes(
        result?.status
      )
    ) {
      await nextTick();
      isPlayWinAudio.value = true;
      battleScrollRef.value?.start?.(result);
    }
  } else {
    getBattleDetail();
    loading.value = false;
  }
}

function onViewAllBattles() {
  router.push("/battles");
}

onBeforeMount(async () => {
  loading.value = true;
  isPlayWinAudio.value = false;
  await getBattleDetail();
});

onBeforeUnmount(() => {
  isStop.value = true;
});
</script>

<style lang="less" scoped>
._back {
  @apply absolute flex items-center;
  top: 0;
  left: 0;
  gap: 0.5rem;
  img {
    width: 1.25rem;
    object-fit: contain;
  }
}

._battle-detail-wrapper {
  @apply flex flex-col;
  padding: 1.69rem 0 3.75rem;
  min-height: var(--realbox-content-clip-header-height);
  ._battle-detail-container {
    position: relative;
    @apply relative flex-1 flex flex-col;
    ._loading {
      @apply flex-1 flex items-center justify-center;
    }

    ._battle-result {
      margin-top: 1.19rem;
      margin-bottom: 3.31rem;
    }

    ._battle-wait {
      margin-top: 6rem;
      margin-bottom: 3.31rem;
    }

    ._battle-scroll {
      margin-top: 1.81rem;
      margin-bottom: 3.31rem;
    }

    ._user-list {
      @apply flex items-center w-full overflow-hidden;
      gap: 3.19rem;
      ._user-item {
        @apply relative flex-1 w-0;
        &:after {
          position: absolute;
          top: 7.5rem;
          bottom: 0;
          right: -1.6rem;
          width: 0.06rem;
          content: "";
          background: linear-gradient(
            to bottom,
            #1a1b1c 0%,
            #575454 50%,
            #1a1b1c 100%
          );
        }
      }
    }
  }

  &._two-person {
    ._user-list {
      width: 43.75rem;
      gap: 3rem;
      ._user-item {
        &:after {
          right: -1.5rem;
        }
      }
    }
  }

  &._three-person {
    ._user-list {
      width: 62.5rem;
      gap: 1rem;
      ._user-item {
        &:after {
          right: -0.33rem;
        }
      }
    }
  }

  ._center {
    @apply flex items-center justify-center;
  }

  &._mobile {
    width: 100%;
    padding: 0.94rem;
    ._center-comp {
      padding: 0.8rem 0 1.5rem;
    }

    ._battle-result {
      margin-top: 4.5rem;
      margin-bottom: 4.5rem;
    }

    ._battle-wait {
      margin-top: 3rem;
      margin-bottom: 3rem;
    }

    ._battle-scroll {
      // padding-top: 0.8rem;
      // padding-bottom: 1.5rem;
      // margin: 0.8rem 0 1.5rem;
      margin: 0;
      height: 100%;
    }

    ._user-list {
      gap: 0.69rem;
      ._user-item {
        &:after {
          top: 4.75rem;
          right: -0.385rem;
        }
      }
    }

    &._two-person {
      width: 100%;
      ._user-list {
        gap: 0.94rem;
        ._user-item {
          &:after {
            right: -0.47rem;
          }
        }
      }
    }

    &._three-person {
      width: 100%;
      ._user-list {
        gap: 0.94rem;
        ._user-item {
          &:after {
            right: -0.48rem;
          }
        }
      }
    }
  }
}
</style>
